import { Table, Button } from "antd";
import React, { useState } from "react";
import { useEffect } from "react";
import http from "../../../utils/axios.js";

export default function WaysList() {
  const columns = [
    {
      title: "编号",
      dataIndex: "NO",
      // width: 150,
      align: "center",
      // sorter: (a, b) => a.NO - b.NO,
    },
    {
      title: "门店名称",
      dataIndex: "name",
      // width: 150,
      align: "center",
      // sorter: (a, b) => a.NO - b.NO,
    },
    {
      title: "序号值",
      dataIndex: "serial",
      // width: 150,
      align: "center",
      // sorter: (a, b) => a.NO - b.NO,
    },
    {
      title: "操作",
      align: "center",
      dataIndex: "control",
      render: () => (
        <>
          <Button type="primary">编辑</Button>
          &nbsp;&nbsp;
          <Button type="primary" danger>
            删除
          </Button>
        </>
      ),
    },
  ];

  const [total, setTotal] = useState(0);
  const pageSize = 10;
  const [pageNo, setPageNo] = useState(1);
  const [list, setList] = useState([]);

  const initData = async () => {
    const res = await http.get("/action/RouteManagement/findRouteList", {
      params: {
        currentPage: pageNo,
        pageSize: pageSize,
      },
    });
    if (res.status === 200) {
      setTotal(100); // TODO need total from servise
      setPageNo(pageNo + 1);
      setList(
        res.data.data.map((e, i) => {
          return {
            key: e.route_id,
            NO: `${(pageNo - 2) * 10 + i + 1}`,
            name: e.route_name,
            serial: i,
          };
        })
      );
      console.log(list);
    }
  };

  useEffect(() => {
    initData();
  }, []);

  const onChange = (pagination, filters, sorter, extra) => {
    console.log("params", pagination, filters, sorter, extra);
  };
  const btn = () => {};
  return (
    <div>
      <div className="storeName">门店名称</div>
      <Table columns={columns} dataSource={list} onChange={onChange} />
      <button onClick={() => btn}>提交</button>
    </div>
  );
}
